/*************************variables*************************/
@bgColor:#FCF6DE;
@mainGreen-color:#498E2D;
@mediumGreen-color:#6B963E;
@ligthGreen-color:#C4D868;
@ligtherGreen-color:#D3E674;
@yellow-color:#FFEC61;
@yellow-ligth-color:#FFEF8F;
@orange-color:#FFB546;
@orange-color2:#FFC627;
@baseMargin:20px;
@fontSizeMedium:14px;
@menuheight:50px;

/*************************text styles*************************/
h2{
  color: @orange-color2;
}
/*************************miselanius styles*************************/
.shadow{
  -moz-box-shadow: 5px 5px  7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px  7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px  5px  7px rgba(0, 0, 0, 0.3);
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#444444')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#444444');
}

/*************************layout styles*************************/
html,body{
  height:100%;
}
  
.f-wrapper{
  height:100%;
  position:relative;
  width:920px;
  margin:0 auto;
}

.f-header{
  .logo{
    width:220px;
    height:150px;
    background:url("../img/riha.png") top left #fff no-repeat;
    background-size:30%;
    border-bottom-left-radius:100%;
    border-bottom-right-radius:100%;
    .shadow;
    img{
      width:70%;
      margin:20px 35px;
    }
  }
}

.f-menu{
  position:absolute;
  top:45%;
  width:100%;
  
  li:nth-child(even){
    background:@mainGreen-color;
  }
  li:nth-child(odd){
    background:@ligthGreen-color;
  }
  li{
      float:left;
      list-style:none;
      width:20%;
      position:relative;
      .shadow;
   .icon{
     position:absolute;
     top:0;
     width:100%;
     height:50px;
     z-index:-1;
        }
    a{
    color:#fff;
    display:block;
    padding:20px 0;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:17px;
    }
    
    .inner-text{
      padding:0 0  15px  0;
      display:none;
      p{
margin: 0 28px;
        color:#A37300;
        font-size:10px;
      }
      a{
        clear:both;
        display:block;
        padding:5px 0;
        font-size:13px;
        color:#A37300;
        box-shadow:none;
      }
    }
   }

   
  
   
   
   
   .products{
     .icon{
      background: url("../img/menu-icons.png") @orange-color  37% 51% no-repeat;
      background-size: auto 151%;
     }
    }
    .company{
     .icon{
      background: url("../img/menu-icons.png") @orange-color 99% 55% no-repeat;
      background-size: auto 140%;
     }
    }
    .quality{
           .icon{
      background: url("../img/menu-icons.png") @orange-color  54% 56% no-repeat;
background-size: auto 153%;
     }
    }
    .sostainability{
           .icon{
background: url("../img/menu-icons.png") @orange-color 67% 36% no-repeat;
background-size: auto 162%;
     }
    }
    .contacts{  
           .icon{
background: url("../img/menu-icons.png") @orange-color  5% 59% no-repeat;
background-size: auto 162%;
     } 
    }

}

.f-footer{
  background:@bgColor;
  padding:20px 0;
  position:absolute;
  bottom:0px;
  width:100%;
  opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
  p{
    text-align:center;
    color:@mainGreen-color;
  }
}
